import React, { useEffect, useState } from 'react';
import { Col, Row, Form, message, Button } from 'antd';
import '../../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import request from '@/http';
import './index.less';
import htmlToDraft from 'html-to-draftjs';
import { Homework } from '@/pages/login/service';
import { ContentState, convertToRaw, EditorState } from 'draft-js';
import { history } from '@/.umi/core/history';

export default function index(Props: any) {
  const [form] = Form.useForm(); //获取数据

  const GetWork = async () => {
    await request
      .post('/student/Operation/ViewAnswers/' + Homework.getHomeworkIds().id)
      .then((response: any) => {
        if (response.code == 200) {
          seteditorState(
            EditorState.createWithContent(
              ContentState.createFromBlockArray(
                htmlToDraft(response.data.answerRemark).contentBlocks,
              ),
            ),
          );
        } else {
          message.error(response.message);
        }
      });
  };

  useEffect(() => {
    if (Homework.getHomeworkIds().state == 1) {
      GetWork();
    }
  }, []);

  const onFinish = async (values: any) => {
    await request
      .post(
        '/student/Operation/StudentAnswers',
        'id=' +
          Homework.getHomeworkIds().id +
          '&answerRemark=' +
          draftToHtml(convertToRaw(editorState.getCurrentContent())),
      )
      .then((response: any) => {
        if (response.code == 200) {
          message.success('提交成功!');
          history.push('/student/work/submit');
        } else {
          message.error(response.message);
        }
      });
  };

  const onFinished = async () => {
    // await request
    //   .post(
    //     '/student/Operation/StudentAnswers',
    //     'id=' +
    //     Homework.getHomeworkIds().id +
    //     '&answerRemark=' +
    //     draftToHtml(convertToRaw(editorState.getCurrentContent()))
    //   )
    //   .then((response:any) => {
    //     if(response.code==200){
    //       message.success('提交成功!');
    //       history.push('/student/work/submit')
    //     }else {
    //       message.error(response.message);
    //     }
    //   });
  };

  const [editorState, seteditorState] = useState(EditorState.createEmpty()); //获取数据
  const onEditorStateChange = (editorState: any) => {
    seteditorState(editorState);
  };
  return (
    <div>
      <Form.Item label="相关附件">XXXX</Form.Item>
      <Form onFinish={onFinish} form={form}>
        <Row gutter={24} justify="center">
          <Col span={24}>
            <Form.Item name="answerRemark">
              <Editor
                editorState={editorState}
                wrapperClassName="demo-wrapper"
                editorClassName="demo-editor"
                onEditorStateChange={onEditorStateChange}
                readOnly={Homework.getHomeworkIds().state == 1}
              />
            </Form.Item>
          </Col>
          <Col>
            {Homework.getHomeworkIds().state == 0 ? (
              <Form.Item>
                <Button style={{ marginRight: 10 }} htmlType="submit">
                  确认提交
                </Button>
                <Button
                  onClick={() => {
                    onFinished();
                  }}
                >
                  暂存草稿
                </Button>
              </Form.Item>
            ) : (
              ''
            )}
          </Col>
        </Row>
      </Form>
    </div>
  );
}
